/*
  学习目标：React路由的基本使用
  步骤：
     1. 下包 react-router-dom@5.3
     2. 导入组件 HashRouter / Route Link
    
   
     5. Link组件设置跳转
*/

import React from 'react';
import { HashRouter, Route, Link } from 'react-router-dom';

export default class App extends React.Component {
  render() {
    return (
      // 3. HashRouter包住所有的代码
      // 💥类似vue中的new VueRouter, 全局只调用一次
      <>
        <HashRouter>
          <div>
            <h1>app组件</h1>
            {/*   4. Route组件设置匹配规则 */}
            {/* 💥 Route相当于vue中的规则对象和挂载点二合一  */}
            <div className="test">
              <Route path="/home" component={Home}></Route>
            </div>

            <Route path="/my" component={MyMusic}></Route>
            <Route path="/friend" component={Friend}></Route>

            <Link to="/home">首页</Link>
            {/* 💥 to属性从/开始写 */}
            <Link to="/my">我的</Link>
            <Link to="/friend">朋友</Link>
          </div>
        </HashRouter>
      </>
    );
  }
}

function Home() {
  return <h1>我是首页组件</h1>;
}

function MyMusic() {
  return <h1>我是我的音乐件</h1>;
}

function Friend() {
  return <h1>我是朋友组件</h1>;
}
